<template>
    <view class="headBg">
        <view class="head-nav">
        
            <view :class="'nav ' + (navIndexClone == index ? 'activite' : navIndexClone-1 == index?'nav2':'')" @click="checkIndex" :data-index="index" v-for="(item, index) in tabMenu" :key="index">
            <!-- <image wx:if="{{navIndex==index}}" class="img1" src="../..https://oos-cn.ctyunapi.cn/front-end/static/title_bg1.png"></image> -->

            <text v-if="item.name">
                {{ item.name }}
                <text v-if="item.value">({{ item.value }})</text>
            </text>

            <text v-else>{{ item }}</text>
           
            <!-- <image v-if="navIndexClone == index" class="img2" src="https://oos-cn.ctyunapi.cn/front-end/static/static/title_bg2.png"></image> -->
        </view>
        </view>
    </view>
</template>

<script>
'use strict'; // components/tabbar.ts

export default {
    data() {
        return {
            navIndexClone: ''
        };
    },
    /**
     * 组件的属性列表
     */
    props: {
        currentPage: {
            type: Number,
            default: 0
        },
        navIndex: {
            type: Number,
            default: 0
        },
        tabMenu: {
            type: Array,
            default: []
        },
        background: {
            type: String,
            default: ''
        }
    },
    created: function () {},
    /**
     * 组件的方法列表
     */
    methods: {
        //tab栏
        checkIndex: function (e) {
            var index = e.currentTarget.dataset.index;
            this.$emit('checkIndex', {
                detail: index
            });
            this.navIndexClone=index
			console.log("打印", this.navIndexClone,index)
        }
    },
    watch: {
        navIndex: {
            handler: function (newVal, oldVal) {
                this.navIndexClone = newVal;
            },

            immediate: true
        }
    }
};
</script>
<style lang="less">

@import "../../../commin/commin.less";
page{
    background-color: #F5F7FA;
}
.head-nav {
	//.kuangao(750rpx,90rpx);
    height: 90rpx;
    background: #F5F7FA;
	margin: 0rpx 24rpx 0rpx 24rpx;
    border-radius: 36px 36px 36px 36px;
	display: flex;
	align-items: center;
    .fontsize(32rpx);
	font-family: PingFang SC;
    color: @text-color3;
    display: flex;
    justify-content: space-around;
    font-size: 28rpx;
    
    font-weight: 400;
    //color: #909399;

	

	.img1 {
		.kuangao(30rpx, 30rpx);
		position: absolute;
        margin-left: 50rpx;
        flex: 1;
	}

	.img2 {
		.kuangao(72rpx, 6rpx);
		position: absolute;
		margin-top: 46rpx;
        margin-left: -68rpx;
        flex: 1;
	}

	.nav {
		padding: 0rpx 26rpx;
        opacity: 1;
        padding: 1rpx 26rpx;
        opacity: 1;
        border-right: 1rpx solid #DCDFE6;
        height: 40rpx;
	}
    .nav:nth-last-child(1) {
        border:none;
    }
    .activite {
		.fontsize(30rpx);
		font-family: PingFang SC;
		font-weight: 400;
		background: var(--btnColor);
        color:#fff;
        border-radius: 32rpx 32rpx 32rpx 32rpx;
        padding: 17rpx 26rpx;
	}
    .nav2{
        border:none;
    }
}

.headBg{
    background: #fff;
    padding-bottom: 24rpx;
}

</style>
